<template>
  <el-drawer v-model="isShow" direction="rtl" stretch="true" size="660">
    <template #header>
      <div class="title">
        <div>
          <b>设备序列号：</b>
          <i>{{devInfo.sn}}</i>
          <el-tag :type="devInfo.on_offline == 1?'success':'info'" style="margin: 0 5px;">{{devInfo.on_offline == 1?'在线':'离线'}}</el-tag> 
        </div>
        <div>
          <b>主板序列号：</b>
          <i>{{devInfo.borad_sn}}</i>
        </div>
        <div>
          <b>所属用户：</b>
          <i>{{devInfo.plat_user.name}}</i>
        </div>
        <div>
          <b>设备型号：</b>
          <i>{{devInfo.equipment_model.model}}</i>
        </div>
        <!-- <div>
          <b>型号详情：</b>
          <i>{{devInfo.equipment_model.detail}}</i>
        </div> -->
      </div>
    </template>
    <template #default>
      <div class="content">
        <el-tabs tab-position="top" model-value="param" stretch>
          <el-tab-pane label="参数详情" name="param">
            <div class="pane" v-if="isNull(devParm)">
              <p class="tip">暂无数据</p>
            </div>
            <div class="pane" v-else>
              <div v-for="item in devParm" :key="item.k">
                <div class="parm">
                  <b>{{item.key}}:</b>
                  <i>{{item.value}}</i>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="已安装应用" name="apps">
            <div class="pane">
              <el-table :data="appList">
                <el-table-column property="name" label="APP" width="200" sortable></el-table-column>
                <el-table-column property="versionName" label="版本" width="200" sortable></el-table-column>
                <!-- <el-table-column property="size" label="大小" width="100" sortable></el-table-column> -->
                <el-table-column property="dtInstall" label="安装时间" width="200" sortable></el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </template>
    <template #footer>
    </template>
  </el-drawer>
</template>

<script>
import { ref } from "vue-demi";
import util from '@/assets/js/util';
export default {
  setup() {
    let isShow = ref(false);
    let devInfo = ref({sn:'',status: '',plat_user: {name: ''},equipment_model: {model: '',detail: ''}})
    let devParm = ref([])
    let appList = ref()
    function open(data) {
      devInfo.value = data
      console.log(data.update_time)
      console.log(data.setups)
      for (let i in data.setups) {
        let d = data.setups[i]
        if (util.hasStr(d.key,'处理器')) {
          data.setups[i].value = d.value.split('EVB')[0]
        }
      }
      devParm.value = data.setups
      appList.value = data.installed_apps
      isShow.value = true
    }

    function close() {
      isShow.value = false
    }

    function isNull(v) {
      return util.isNull(v)
    }

    return {
      isShow, devInfo, devParm, appList,
      open,close,isNull
    };
  },
};
</script>

<style lang="scss" scoped>
.title{
  @extend %view-flex;
  align-items: flex-start;
  div{
    @extend %view-flex;
    flex-direction: row;
    justify-content: flex-start;
    font-size: 14px;
    b{
      color: #333;
      margin: 0 5px;
    }
    i{
      font-style: normal;
    }
  }
}
.content{
  width: 100%;
  .pane{
    margin-top: 10px;
    .tip{
      padding-top: 10px;
      text-align: center;
      font-size: 14px;
      color: #999;
    }
    .parm{
      font-size: 14px;
      padding: 5px;
      b{
        color: #333;
      }
      i{
        font-style: normal;
        margin: 0 5px;
        color: #666;
      }
    }
    .el-table{
      width: 100%;height: calc(100vh - 260px);
    }
  }
}

</style>